<template>
  <div id="viewQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <div>
          <icon-to-left @click="goBack" :size="20" />
        </div>
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig.timeLimit / 1000 ?? 0 }}s
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ question.judgeConfig.memoryLimit / 1024 ?? 0 }}MB
                </a-descriptions-item>
              </a-descriptions>
              <MdViewer :value="'## **题目描述：**'" />
              <MdViewer :value="question.content || ''" />
              <MdViewer :value="'## **输入格式：**'" />
              <MdViewer :value="question.inputFormat || ''" />
              <MdViewer :value="'## **输出格式：**'" />
              <MdViewer :value="question.outputFormat || ''" />
              <MdViewer :value="'## **样例：：**'" />
              <div
                v-for="(item, index) in question.judgeCase"
                :key="index"
                class="sample-wrapper"
              >
                <div class="sample-index">测试用例 {{ index + 1 }}</div>
                <a-card class="sample-card">
                  <template #title>
                    <div>输入</div>
                  </template>
                  <div>
                    <pre>{{ item.input }}</pre>
                  </div>
                </a-card>
                <a-card class="sample-card">
                  <template #title>
                    <div>输出</div>
                  </template>
                  <pre>{{ item.output }}</pre>
                </a-card>
                <div style="height: 24px"></div>
              </div>
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="评论" disabled> 评论区</a-tab-pane>
          <a-tab-pane key="answer" title="答案"> 暂时无法查看答案</a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item
            field="language"
            label="编程语言"
            style="min-width: 240px"
          >
            <a-select
              v-model="form.language"
              :style="{ width: '320px' }"
              placeholder="选择编程语言"
            >
              <a-option>c++</a-option>
              <a-option>java</a-option>
              <a-option>python</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :value="form.code as string"
          :language="codeLanguage"
          :handle-change="changeCode"
        />
        <a-divider size="0" />
        <a-button type="primary" style="min-width: 200px" @click="doSubmit">
          提交代码
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import {
  onMounted,
  ref,
  watchEffect,
  withDefaults,
  defineProps,
  computed,
} from "vue";
import {
  Question,
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const contestId = route.query.contestId;
interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const question = ref<QuestionVO>();
const codeLanguage = computed(() => {
  if (form.value.language === "c++") {
    return "cpp";
  }
  return form.value.language;
});

const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
};

const form = ref<QuestionSubmitAddRequest>({
  language: "c++",
  code: "",
});
/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }
  if (!form.value.code) {
    message.error("代码不能为空");
    return;
  }

  const res = await QuestionControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: question.value.id,
    contestId: contestId as any,
    snowflakeId: question.value.snowflakeId,
  });
  if (res.code === 0) {
    message.success("提交成功");
    await router.push("/question_submit");
  } else {
    message.error("提交失败," + res.message);
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});
const goBack = () => {
  router.back();
};
const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}

.sample-card .arco-card-body {
  padding: 8px;
}

.sample-wrapper {
  margin-bottom: 24px;
}

.sample-index {
  font-weight: bold;
  margin-bottom: 8px;
}
</style>
